﻿@model Declaratie.Models.Project

@{
    ViewBag.Title = "Nieuw project";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var activiteiten = new List<Declaratie.Models.Activiteit>();
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" type="text/javascript" />

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Nieuw Project</legend>
        <div style="width: 1000px;">
            <div style="float: left; width: 400px;">
            <h3>Project details</h3>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Nr)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Nr)
                    @Html.ValidationMessageFor(model => model.Nr)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Title)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Title)
                    @Html.ValidationMessageFor(model => model.Title)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.ProjectSoort)
                    <select name="ProjectSoort">
                        <option value="Internationaal bedrijf">Internationaal bedrijf</option>
                        <option value="Klein bedrijf">Klein bedrijf</option>
                        <option value="Groot bedrijf">Groot bedrijf</option>
                        <option value="Middelmatig bedrijf">Middelmatig bedrijf</option>
                    </select>
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.ProjectLoopTijdBegin)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ProjectLoopTijdBegin)
                    @Html.ValidationMessageFor(model => model.ProjectLoopTijdBegin)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.ProjectLoopTijdEind)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ProjectLoopTijdEind)
                    @Html.ValidationMessageFor(model => model.ProjectLoopTijdEind)
                </div>

                <div class="editor-label">
                    Activiteiten <input id="addActiviteit" type="button" value="+" />
                    <br />

                    <ul id="ulActiviteiten">
            
                    </ul>
                </div>

            </div>
        

            <div style="float: left; width: 600px;">
                <h3>Consumption partners</h3>
                    <input id="addCP" type="button" value="+" />
                    <br />
                    <div id="ulCPs">
            
                    </div>
            </div>

            <br style="clear: left;" />
        </div>
    <input type="submit" value="Toevoegen" />
    </fieldset>
    
    
    <div id="addActiviteitDialog" title="Activiteit toevoegen">
        Kies uit bestaande activiteiten
        <select id="Activiteiten" name="Activiteiten">
        @foreach(Declaratie.Models.Activiteit a in ViewBag.Activiteiten) {
            <option value="@a.Title">@a.Title</option>
        }
        </select>

        <br /><br />

        <input id="checkActiviteit" type="checkbox"/> Voer nieuwe activiteit in:
        <input id="inputActiviteit" type="text" />
    </div>
    
    <div id="addCPDialog" title="Consumption Partner">
        <table>
            <tr>
                <td>
                    Naam:
                </td>
                <td>
                    <input id="inputCPNaam" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Straat:
                </td>
                <td>
                    <input id="inputCPStraat" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Nr:
                </td>
                <td>
                    <input id="inputCPStraatNr" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Toevoeging:
                </td>
                <td>
                    <input id="inputCPStraatNrToevoeging" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Postcode:
                </td>
                <td>
                    <input id="inputCPPostcode" type="text" />
                </td>
            </tr>
        </table>
    </div>
    
    
    <div id="addMedewerkerDialog" title="Medewerker">
        <table>
            <tr>
                <td>
                    Voornaam:
                </td>
                <td>
                    <input id="inputMVoornaam" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Achternaam:
                </td>
                <td>
                    <input id="inputMAchternaam" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Telefoonnummer:
                </td>
                <td>
                    <input id="inputMTelefoonnummer" type="text" />
                </td>
            </tr>
        </table>
    </div>
}

<div>
    @Html.ActionLink("Terug naar projecten", "Index")
</div>


<script>
    var activiteiten = [];
    var CPs = [];

    function SetCPList() {
        var elements = [];
        $("#ulCPs").html("");
//        var newdiv = document.createElement('ul');
//        var inner = "";
//        for (var i = 0; i < CPs.length; i++) {
//            inner += '<li><a href="#tabs-'+i+ '">' + CPs[i].Naam + '</a></li>';
//        }
//        newdiv.innerHTML = inner;
//        $("#ulCPs").append(newdiv);

        for (var i = 0; i < CPs.length; i++) {
            var newdiv = document.createElement('div');
            newdiv.setAttribute('id', 'tabs-'+i);
            var medewerkers = "";
            console.log(CPs[0].Medewerkers.length);
            for (var j = 0; j < CPs[i].Medewerkers; j++) {
                medewerkers += '<h4>' + CPs[i].Medewerkers[j].Voornaam + '</h4>';
            }
            var s = '<h3>' + CPs[i].Naam + '</h3>' +
            'Adresgegevens: <br /> ' + CPs[i].Straat + ' ' + CPs[i].StraatNr + ' ' + CPs[i].StraatNrToevoeging + '<br /> <br />' +

            'Medewerkers:' + '<input onClick="AddMedewerker()" type="button" value="+" />' + '<br />' + medewerkers;
            newdiv.innerHTML = s;
            $("#ulCPs").append(newdiv);
        }
    }

    function CP() {
        this.Naam = "";
        this.Straat = "";
        this.StraatNr = "";
        this.StraatNrToevoeging = "";
        this.Medewerkers = [];
    }

    function Medewerker(){
        this.Voornaam = "";
        this.Achternaam = "";
        this.Telefoonnnummer = "";
    }

    $(function () {
        $("#inputActiviteit").prop('disabled', true);
        $("#checkActiviteit").change(function () {
            if (!$(this).is(':checked')) {

                $("#Activiteiten").prop('disabled', false);
                $("#inputActiviteit").prop('disabled', true);
            } else {
                $("#Activiteiten").prop('disabled', true);
                $("#inputActiviteit").prop('disabled', false);
            }
        });


        $("#addActiviteitDialog").dialog({
            autoOpen: false,
            width: 450,
            height: 210,
            modal: true,
            buttons: {
                "Voeg toe": function () {

                    var ac = "";
                    if (!$("#checkActiviteit").is(':checked')) {
                        ac = $("#Activiteiten").val();

                    } else {
                        ac = $("#inputActiviteit").val();
                    }
                    var contains = false;
                    for (var j = 0; j < activiteiten.length; j++) {
                        if (activiteiten[j] == ac)
                            contains = true;
                    }
                    if (!contains)
                        activiteiten.push(ac);
                    var s = "";
                    for (var i = 0; i < activiteiten.length; i++) {
                        if (activiteiten[i] != "")
                            s += '<li>' + activiteiten[i] + '</li>';
                    }
                    $("#ulActiviteiten").html(s);

                    $("#inputActiviteit").val('');

                    if ($("#checkActiviteit").is(':checked')) {
                        $("#checkActiviteit").prop('checked', false);
                        $("#Activiteiten").prop('disabled', false);
                        $("#inputActiviteit").prop('disabled', true);
                    }

                    $(this).dialog("close");
                }
            }
        });


        $("#addCPDialog").dialog({
            autoOpen: false,
            width: 450,
            height: 500,
            modal: true,
            buttons: {
                "Voeg toe": function () {
                    var cp = new CP();
                    cp.Naam = $("#inputCPNaam").val();
                    cp.Straat = $("#inputCPStraat").val();
                    cp.StraatNr = $("#inputCPStraatNr").val();
                    cp.StraatNrToevoeging = $("#inputCPStraatNrToevoeging").val();

                    CPs.push(cp);

                    SetCPList();
                    $(this).dialog("close");
                }
            }
        });

        $("#addMedewerkerDialog").dialog({
            autoOpen: false,
            width: 450,
            height: 300,
            modal: true,
            buttons: {
                "Voeg toe": function () {
                    var m = new Medewerker();
                    m.Voornaam = $("#inputMVoornaam").val();
                    m.Achternaam = $("#inputMAchternaam").val();
                    m.Telefoonnummer = $("#inputMTelefoonnummer").val();

                    CPs[0].Medewerkers.push(m);
                    
                    $(this).dialog("close");
                }
            }
        });


        $("#ProjectLoopTijdBegin").datepicker({
            showAnim: 'slideDown'
        });

        $("#ProjectLoopTijdEind").datepicker({
            showAnim: 'slideDown'
        });

        $("#addActiviteit").click(function () {
            $("#addActiviteitDialog").dialog("open");
        });

        $("#addCP").click(function () {
            $("#addCPDialog").dialog("open");
        });
    });

    function AddMedewerker() {
        $("#addMedewerkerDialog").dialog("open");
    }

</script>